<template>
  <div>
    <Comheader></Comheader>
    <Comheadernav></Comheadernav>

    <div class="banner">
      <div>{{ title }}</div>
      <div class="commonwidth">
        <div class="cont">
          <Combanner></Combanner>
        </div>
      </div>
    </div>
    <div class="commonwidth top-category">
      <div class="sub-list">
        <h3>全部分类</h3>
        <ul>
          <li v-for="(i, ind) in category.children" :key="ind">
            <a href="javascript:;">
              <img :src="i.picture" />
              <p>{{ i.name }}</p>
            </a>
          </li>
        </ul>
      </div>
      <div class="ref-goods" v-for="(i, ind) in category.children" :key="ind">
        <div class="head">
          <h3>- {{ i.name }} -</h3>
          <p class="tag">温暖柔软，品质之选</p>
          <a href="javascript:;" class="xtx-more">
            <span>查看全部</span>
            <i class="iconfont icon-angle-right"></i>
          </a>
        </div>
        <div class="body">
          <router-link
            href="javascript:;"
            class="goods-item"
            v-for="(item, index) in i.goods"
            :key="index"
            :to="'/proguct/' + item.id"
          >
            <img :src="item.picture" alt="" />
            <p class="name ellipsis">{{ item.name }}</p>
            <p class="desc ellipsis">{{ item.desc }}</p>
            <p class="price">¥{{ item.price }}</p>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import Comheader from "@/page/index/header.vue";
import Comheadernav from "@/page/index/headerNav.vue";
import Combanner from "@/page/index/banner.vue";
export default {
  components: {
    Comheader,
    Comheadernav,
    Combanner,
  },
  data() {
    return {
      category: [],
      title: "",
    };
  },
  methods: {
    getCategory() {
      console.log(this.$route.query);
      var id=this.$route.query.id
      this.axios
        .get("https://apipc-xiaotuxian-front.itheima.net/category?id=" + id)
        .then((res) => {
          if (res.data.msg == "操作成功") {
            this.category = res.data.result;
          }
        });

      this.title = this.$route.meta.title;
    },
  },
  mounted() {

    this.getCategory();
  },
  watch: {
    $route: "getCategory",
  },
  beforeRouteUpdate(to, from,next) {
    console.log(to, from);
    next()
  },
};
</script>
  
  <style scoped>
@import url(../index.css);
.goods-item {
  display: block;
  width: 220px;
  padding: 20px 30px;
  text-align: center;
  transition: all 0.5s;
}

.goods-item:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.goods-item img {
  width: 160px;
  height: 160px;
}

.goods-item p {
  padding-top: 10px;
}

.goods-item .name {
  font-size: 16px;
}

.goods-item .desc {
  color: #999;
  height: 29px;
}

.goods-item .price {
  color: #cf4444;
  font-size: 20px;
}

.top-category h3 {
  font-size: 28px;
  color: #666;
  font-weight: 400;
  text-align: center;
  line-height: 100px;
}

.top-category .sub-list {
  margin-top: 20px;
  background-color: #fff;
}

.top-category .sub-list ul {
  display: flex;
  padding: 0 32px;
  flex-wrap: wrap;
  min-height: 160px;
}

.top-category .sub-list ul li {
  width: 168px;
  height: 160px;
}

.top-category .sub-list ul li a {
  text-align: center;
  display: block;
  font-size: 16px;
}

.top-category .sub-list ul li a img {
  width: 100px;
  height: 100px;
}

.top-category .sub-list ul li a p {
  line-height: 40px;
}

.top-category .sub-list ul li a:hover {
  color: #27ba9b;
}

.top-category .ref-goods {
  background-color: #fff;
  margin-top: 20px;
  position: relative;
}

.top-category .ref-goods .head .xtx-more {
  position: absolute;
  top: 20px;
  right: 20px;
}

.top-category .ref-goods .head .tag {
  text-align: center;
  color: #999;
  font-size: 20px;
  position: relative;
  top: -20px;
}

.top-category .ref-goods .body {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0 65px 30px;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>